<!--
 * @Author: 胡俊/treence
 * @Date: 2022-05-31 16:25:47
 * @LastEditors: 黄宇/Hyuishine
 * @LastEditTime: 2023-10-25 10:05:16
 * @Description: 
 * @Email: treence@gmail.com
 * @Company: 3xData
 * @youWant: add you want
-->
<template>
  <view class="container_page">
    <action-bar :options="navOptions"></action-bar>

    <view class="practice-box">
      <view class="box" v-for="(item, index) in list" :key="index">
        <!-- 字段标题 -->
        <view class="collapsePane">
          <view class="title" @click="status = !status">
            {{ item.name }}
            <view class="cuIcon-right" />
          </view>

          <!-- 折叠中的内容 -->
          <view class="pane" :class="status ? 'unfold' : 'unfold'">

            <view class="card_form scrollPane">

              <!-- 单行表单项  -->
              <view class="formItem" v-for="formItem, i in item.data" :key="i"
                @click="navTo(formItem.executeId, formItem.state, formItem)">
                <span style="width: 600rpx;">{{ formItem.contentName }}</span>
                <image v-show="formItem.state == '1'" class="image" src="/static/implement.png" mode="" />
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 提示 -->
    <view class="tip">
      <view class="span">提示:</view>
      <span>蓝色图标代表已完成，无图标代表未执业</span>
    </view>
    <view style="height: 100rpx"></view>
  </view>
</template>

<script>
import {
  baseImgUrl,
  baseApiUrl
} from '@/config.js';
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState({
      typeList: state => state.manage.typeList,
    }),
    changeSate() {
      return this.$store.state.manage.changeSate
    }
  },

  data() {
    return {
      baseApiUrl: baseApiUrl,
      baseImgUrl: baseImgUrl,
      status: false, // true为开启
      navOptions: {
        statusBar: 'dark',
        left: {
          icon: 'back',
        },
        center: {
          title: '执业内容'
        },
      },
      title: '',
      list: [],
      flag: false,
      isProjectHead: false, // 用于判断是否为项目负责人

      save_btn: true, // 当上传完成后，通过这个字段判断上传按钮是否展示
      fileUrls: null, // 人脸识别后的暂存字段

      uploadList: [], // 点击上传时的列表数据
      stateIndex: 0, // 记录提交成功次数，如果与提交次数不匹配时，应提示提交失败，若与提交次数匹配时，则提示提交成功
      uploadIndex: 0, // 记录需要提交的次数

      design: null, // 该字段代表是开始执业还是确认任务(为'confirm'时代表确认任务confirm；为'practice'时代表开始执业)
    }
  },
  onLoad(options) {
    let that = this
    that.design = options.design
    // 如果有查看标识则直接查看表单内容
    that.isProjectHead = options.isProjectHead
  },
  onShow() {
    // 获取缓存
    // let list = this.$store.state.manage.online_list
    this.list = this.typeList
    this.$forceUpdate()
  },
  watch: {
    'typeList': {
      handler(val) {
        if (!val == '') {
          this.list = val
          this.navOptions.center.title = this.$store.state.unitTask.wbName
        }
      },
      deep: true,
      immediate: true
    },
  },
  methods: {
    navTo(id, state, data) {
      // console.log(id, state, data)
      this.$store.commit('saveMaintainDetailId', data.maintainDetailId)
      let dist = state == 1 ? '&noImplement=true' : ''
      uni.navigateTo({
        url: '../../pages_workTableChild/manage/Check?executeId=' + id + '&isProjectHead=' + this.isProjectHead + dist + '&design=' + this.design
      })
    },
    saging() {
      let that = this
      uni.showModal({
        title: '提示',
        content: '是否确认将数据暂存？',
        success: function (res) {
          if (res.confirm) {
            let result = false
            let practice = that.$store.state.manage.practice // 获取该任务是月度、季度、年度类型
            let typeList = that.$store.state.manage.typeList
            let manageList = that.$store.state.manage.manageList
            let typeListIndex = that.$store.state.manage.typeListIndex
            try {
              typeList.forEach(item => {
                item.data.forEach(list => {
                  if (list.required.indexOf(practice) != '-1') {
                    if (list.state == '1') {
                      result = true
                    } else {
                      throw new Error
                    }
                  } else {
                    result = true
                  }
                })
              })
            } catch (e) {
              result = false
            };
            if (result) {
              manageList[typeListIndex].state = '3'
            } else {
              manageList[typeListIndex].state = '2'
            }
            manageList[typeListIndex].sub_btn = true
            manageList[typeListIndex].type = typeList
            uni.showToast({
              title: '暂存成功',
              duration: 2000
            });
            setTimeout(() => {
              that.$store.commit('saveTypeList', [])
              wx.disableAlertBeforeUnload({
                complete: (e) => {
                  console.log(e);
                }
              })
              uni.navigateBack()
            }, 1000);
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
    },
  }
}
</script>

<style lang="scss" scoped>
@import "./styles/foldForm.scss";
</style>
<style lang="less">
.tip {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  width: calc(100% - 48rpx);
  margin: 24rpx auto 0;
  font-size: 20rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #dc1010;

  .span {
    width: 80rpx;
  }
}

.image {
  width: 28rpx;
  height: 28rpx;
  margin: 0 0 0 19rpx;
}
</style>